<template>
    <!-- 抽离展示屏nva区域-->
    <div class="title_box">
              <!-- 在线人数 -->
              <!--<div class="real_time_num" style="line-height: 30px;">-->
              <!--  <span>实时在线人数</span>-->
              <!--  <span class="item_num_show">-->
              <!--      <ul :style="num1">-->
              <!--          <li>0</li>-->
              <!--          <li>1</li>-->
              <!--          <li>2</li>-->
              <!--          <li>3</li>-->
              <!--          <li>4</li>-->
              <!--          <li>5</li>-->
              <!--          <li>6</li>-->
              <!--          <li>7</li>-->
              <!--          <li>8</li>-->
              <!--          <li>9</li>-->
              <!--      </ul>-->
              <!--  </span>-->
              <!--  <span class="item_num_show">-->
              <!--      <ul :style="num2">-->
              <!--          <li>0</li>-->
              <!--          <li>1</li>-->
              <!--          <li>2</li>-->
              <!--          <li>3</li>-->
              <!--          <li>4</li>-->
              <!--          <li>5</li>-->
              <!--          <li>6</li>-->
              <!--          <li>7</li>-->
              <!--          <li>8</li>-->
              <!--          <li>9</li>-->
              <!--      </ul>-->
              <!--  </span>-->
              <!--  <span class="item_num_show">-->
              <!--      <ul :style="num3">-->
              <!--          <li>0</li>-->
              <!--          <li>1</li>-->
              <!--          <li>2</li>-->
              <!--          <li>3</li>-->
              <!--          <li>4</li>-->
              <!--          <li>5</li>-->
              <!--          <li>6</li>-->
              <!--          <li>7</li>-->
              <!--          <li>8</li>-->
              <!--          <li>9</li>-->
              <!--      </ul>-->
              <!--  </span>-->
              <!--  <span class="item_num_show">-->
              <!--      <ul :style="num4">-->
              <!--          <li>0</li>-->
              <!--          <li>1</li>-->
              <!--          <li>2</li>-->
              <!--          <li>3</li>-->
              <!--          <li>4</li>-->
              <!--          <li>5</li>-->
              <!--          <li>6</li>-->
              <!--          <li>7</li>-->
              <!--          <li>8</li>-->
              <!--          <li>9</li>-->
              <!--      </ul>-->
              <!--  </span>-->
              <!--  <span class="item_num_show">-->
              <!--      <ul :style="num5">-->
              <!--          <li>0</li>-->
              <!--          <li>1</li>-->
              <!--          <li>2</li>-->
              <!--          <li>3</li>-->
              <!--          <li>4</li>-->
              <!--          <li>5</li>-->
              <!--          <li>6</li>-->
              <!--          <li>7</li>-->
              <!--          <li>8</li>-->
              <!--          <li>9</li>-->
              <!--      </ul>-->
              <!--  </span>-->
              <!--  <span class="item_num_show">-->
              <!--      <ul :style="num6">-->
              <!--          <li>0</li>-->
              <!--          <li>1</li>-->
              <!--          <li>2</li>-->
              <!--          <li>3</li>-->
              <!--          <li>4</li>-->
              <!--          <li>5</li>-->
              <!--          <li>6</li>-->
              <!--          <li>7</li>-->
              <!--          <li>8</li>-->
              <!--          <li>9</li>-->
              <!--      </ul>-->
              <!--  </span>-->
              <!--  <span class="item_num_show">-->
              <!--      <ul :style="num7">-->
              <!--          <li>0</li>-->
              <!--          <li>1</li>-->
              <!--          <li>2</li>-->
              <!--          <li>3</li>-->
              <!--          <li>4</li>-->
              <!--          <li>5</li>-->
              <!--          <li>6</li>-->
              <!--          <li>7</li>-->
              <!--          <li>8</li>-->
              <!--          <li>9</li>-->
              <!--      </ul>-->
              <!--  </span>-->
              <!--</div>-->
              <!-- 大标题 -->
              <div class="big_title">
                数据可视化（示例）
              </div>
              <!-- 右侧时间显示 -->
              <div class="time">
                 <span>{{nyear}}年{{nmonth}}月{{nday}}日</span>
                 <span style="padding:0 10px;">星期{{weeked}}</span>
                 <span style="padding-right:20px;">{{nowtime}}</span>
                 <span>{{nonglitime}}</span>
              </div>
          </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
import { getTime } from '../../utils/getdate'
export default {
    name:'CompanyTitle',
    props:{
        numdata:{
            type:String,
            default:'0034668'
        }
    },
    setup(props){
        const num1 = ref(`transform: translateY(0px);`)
        const num2 = ref(`transform: translateY(0px);`)
        const num3 = ref(`transform: translateY(0px);`)
        const num4 = ref(`transform: translateY(0px);`)
        const num5 = ref(`transform: translateY(0px);`)
        const num6 = ref(`transform: translateY(0px);`)
        const num7 = ref(`transform: translateY(0px);`)
        //  年，月，日，星期几，时分秒，农历日期
        const nyear = ref(null)
        const nmonth = ref(null)
        const nday = ref(null)
        const weeked = ref(null)
        const nowtime = ref(null)
        const nonglitime = ref(null)
        // 定时器，实时刷新页面时间
        setInterval(() => {
            let time = getTime()
            nyear.value =time.nyear
            nmonth.value =time.nmonth
            nday.value =time.nday
            weeked.value =time.weeked
            nowtime.value =time.nowtime
            nonglitime.value =time.nonglitime
        }, 1000);
        // 侦听在线人数，人数变化改变当前展示数据
        watch(
            ()=>props.numdata,
            ()=>{
                num1.value = `transform: translateY(${-30*props.numdata.split('')[0]}px);`
                num2.value = `transform: translateY(${-30*props.numdata.split('')[1]}px);`
                num3.value = `transform: translateY(${-30*props.numdata.split('')[2]}px);`
                num4.value = `transform: translateY(${-30*props.numdata.split('')[3]}px);`
                num5.value = `transform: translateY(${-30*props.numdata.split('')[4]}px);`
                num6.value = `transform: translateY(${-30*props.numdata.split('')[5]}px);`
                num7.value = `transform: translateY(${-30*props.numdata.split('')[6]}px);`
            },
            {deep:true,immediate:true}
        )
        return{
            num1,
            num2,
            num3,
            num4,
            num5,
            num6,
            num7,
            nyear,
            nmonth,
            nday,
            weeked,
            nowtime,
            nonglitime
        }
    }
}
</script>

<style lang="scss" scoped >
.title_box{
  box-sizing: border-box;
  height: 70px;
  padding: 20px;
  display: flex;
}
.real_time_num{
  width: 500px;
  color: #68b6ff;
  font: 400 16px '思源黑体';
}
.item_num_show{
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    margin: 0 2px;
    background: url('../../assets/images/useimages/usernum-bg.png') no-repeat center;
    overflow: hidden;
    ul{
        transition: transform 1s ease-in-out;
        margin: 0;
        padding: 0;
    }
    li{
        font: 700 26px '思源黑体';
        list-style: none;
        line-height: 30px;
    }
}
span:nth-child(1){
    margin-right: 10px;
    vertical-align: top;
}

.big_title{
  flex: 1;
  height: inherit;
  text-align: center;
  margin-left: 530px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #68b6ff;
  font: 700 40px '思源黑体';
}
.time{
  width: 500px;
  box-sizing: border-box;
  color: #68b6ff;
  font: 400 16px '思源黑体';
}

</style>
